<template>
  <!-- 视频播放弹窗 -->
  <el-dialog
    title="播放视频"
    :visible.sync="videoDialogVisible"
    width="80%"
    center
  >
    <video
      :src="currentVideoUrl"
      controls
      autoplay
      muted
      playsinline
      preload="auto"
      style="width: 100%; max-height: 70vh; object-fit: contain;"
    >
      <source :src="currentVideoUrl" type="video/mp4">
      <source :src="currentVideoUrl" type="video/webm">
      <source :src="currentVideoUrl" type="video/ogg">
      您的浏览器不支持视频播放，请尝试更换浏览器或更新浏览器版本
    </video>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      videoDialogVisible: false, // 弹窗显示状态
      currentVideoUrl: '' // 当前播放视频的完整URL
    }
  },
  methods: {
    /**
     * 打开视频播放弹窗
     * @param {String} url - 视频地址（可能是相对路径或完整URL）
     */
    openVideo(url) {
      console.log("打开视频播放弹窗，视频地址：");
      console.log(url)
      if (!url) {
        this.$message.warning('视频地址不存在');
        return;
      }
      // 处理URL：如果是相对路径则拼接基础API地址
      this.currentVideoUrl = url.startsWith('http') 
        ? url 
        : process.env.VUE_APP_BASE_API + url;
      
      // 先设置弹窗可见，确保DOM已渲染，然后再加载视频
      this.videoDialogVisible = true;
      
      // 延迟设置视频源，确保video元素已完全加载
      this.$nextTick(() => {
        setTimeout(() => {
          const videoElement = document.querySelector('.el-dialog__body video');
          if (videoElement) {
            // 重新加载视频以确保正确渲染
            videoElement.load();
          }
        }, 100);
      });
    }
  }
}
</script>